<template>
  <div id="app" style="">
    <h3 style="display: flex;justify-content: flex-start;color: #2a2929">
      电影云开放平台接口测试
    </h3>
    <div style="display: flex;justify-content: flex-end">
      <el-button size="small" @click="drawer = true" type="primary" style="margin-right: 20px;">
        配 置
      </el-button>
    </div>
    <!--    右上角的配置-->
    <el-drawer
        title="平台自定义配置"
        :visible.sync="drawer"
        :direction="direction"
        size="20%"
    >
      <div style="margin: 20px;">
        <el-form label-position="left" :model="formLabelAlign">
          <el-form-item label="测试环境">
            <el-select v-model="formLabelAlign.env" size="small" filterable placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="cinemaLinkId">
            <el-input style="width: 60%" size="small" v-model="formLabelAlign.cinemaLinkId"></el-input>
          </el-form-item>
          <el-form-item label="channelCode">
            <el-input style="width: 60%" size="small" v-model="formLabelAlign.channelCode"></el-input>
          </el-form-item>
          <el-form-item label=" 自 定 义1">
            <el-input style="width: 60%" size="small" v-model="formLabelAlign.type1"></el-input>
          </el-form-item>
          <el-form-item label=" 自 定 义2">
            <el-input style="width: 60%" size="small" v-model="formLabelAlign.type2"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
            <el-button size="small" @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- 查询区域-->
    <div style="display: flex;justify-content:space-between;width: 600px;margin-left: 30px">
      <el-input size="small" v-model="api_name" placeholder="API名称"></el-input>
      <el-input style="margin-left: 20px" size="small" v-model="api_cn" placeholder="接口描述"></el-input>
      <el-button size="small" style="margin-left: 20px" type="primary" @click="selectApi">查询</el-button>
    </div>
    <!-- 列表区-->
    <div style="margin-top: 30px;margin-left:10px;width: 62%">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            align="center"
            prop="nameSpace"
            label="Namespace"
            width="150">
        </el-table-column>
        <el-table-column
            align="center"
            prop="apiName"
            label="API名称"
            width="320">
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="接口描述"
            width="320">
        </el-table-column>
        <el-table-column
            align="center"
            prop="category"
            label="大类"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium">测试</el-button>
            <el-button disabled type="text" size="medium">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 弹出框-->
    <!--    <el-button @click="visible = true">Button</el-button>-->
    <el-dialog width="98%" :visible.sync="visible">
      <div style="display: flex;flex-wrap: wrap">
        测试接口：{{ api }}
      </div>
      <p style="display: flex;justify-content: flex-start">{{ popoverData.element }}</p>
      <div>
        <el-row :gutter="24">
          <el-col :span="7">
            <div class="grid-left" style="margin-right: 90px">
              <el-form ref="form" :model="form" label-width="120px">
                <div v-for="(value, key, index) in this.extensionParam" :key="key">
                  <el-form-item :label="key">
                    <el-input :placeholder="value" v-model="form.request[key]"></el-input>
                  </el-form-item>
                  <!--                  {{ index }}. {{ key }}: {{ value }}-->
                </div>
                <el-form-item>
                  <el-button type="primary" size="small" @click="send">发送</el-button>
                  <el-button size="small" @click="cancelDialog">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-center">
              <div>
                <el-tabs v-model="activeName" @tab-click="clickTabs">
                  <el-tab-pane label="测试记录" name="first"></el-tab-pane>
                  <el-tab-pane label="收藏" name="second"></el-tab-pane>
                </el-tabs>
              </div>
              <div>
                <el-table
                    border
                    :data="tableDataTabs"
                    style="width: 100%"
                    :default-sort="{prop: 'date', order: 'descending'}"
                    @row-click="handleRowClick"

                >
                  <el-table-column
                      prop="gmtCreate"
                      label="测试时间"
                      sortable
                      width="170">
                  </el-table-column>
                  <el-table-column
                      show-overflow-tooltip
                      prop="remark"
                      label="备注"
                      sortable
                      width="100">
                  </el-table-column>
                  <el-table-column
                      show-overflow-tooltip
                      prop="result"
                      label="结果">
                  </el-table-column>
                  <el-table-column
                      fixed="right"
                      label="操作"
                      width="70">
                    <template slot-scope="scope">

                      <el-dropdown size="medium" @command="clickDropDownItem">
                                          <span style="color: cornflowerblue;cursor: pointer;" class="el-dropdown-link">
                                            更多<i class="el-icon-caret-bottom el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command=1 class="clearfix">收藏</el-dropdown-item>
                          <el-dropdown-item command=2 class="clearfix">备注2</el-dropdown-item>
                          <el-dropdown-item command=3 class="clearfix">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div>
              <h3 style="display: flex;justify-content: flex-start;color: #23c523">
                返回结果
              </h3>
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 10, maxRows: 15}"
                  placeholder="返回结果"
                  v-model="result_textarea">
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "Lark",
  data() {
    return {
      visible: false,
      api_name: '',
      api_cn: '',
      api:'',
      result_textarea:'',
      tableData: [{
        "id": 1,
        "apiName": "basedata.cinema.getList",
        "name": "影城列表查询",
        "category": "基础",
        "gmtCreate": 1716455611000,
        "gmtModified": 1716369193000,
        "nameSpace": "alibaba.dme.jiaying",
        "extension": "{\"channelCode\": \"java.lang.String\"}"
      }],
      drawer: false,
      direction: 'rtl',
      formLabelAlign: {
        env:'online',
        cinemaLinkId: '',
        channelCode: '',
        type1: '',
        type2: '',
      },
      // row: {},
      options: [{
        value: 'daily',
        label: '日常'
      }, {
        value: 'pre',
        label: '预发'
      }, {
        value: 'online',
        label: '线上'
      },],
      // value: 'online',
      popoverData: {
        element: ''
      },
      form: {
        value: [],
        request: {}
      },
      extensionParam: {"channelCode": "java.lang.String", "cinemaLinkId": "java.lang.String"},
      activeName: 'first',
      tableDataTabs: [
        {
          "id": 1,
          "apiId": 1,
          "userId": "1",
          "remark": "re",
          "requestUrl": null,
          "gmtCreate": 1716963651000,
          "gmtModified": "2024-05-29 06:20:54",
          "userCreate": "1",
          "userModified": "1",
          "requestData": null,
          "result": null
        },
      ],
      popoverVisible: false,
    }
  },
  mounted() {
    this.selectApi();
  },

  methods: {
    handleClick(row) {
      this.visible = !this.visible;
      this.api = row["apiName"]
      this.extensionParam = JSON.parse(row["extension"])
      this.postRequest("/openApiLog/list", {apiId: row.id}).then(resp => {
        this.tableDataTabs = resp.data;
        console.log(this.tableData)
      })
    },
    selectApi() {
      console.log("333")
      this.postRequest("/openApi/list", {apiName: this.api_name, name: this.api_cn}).then(resp => {
        this.tableData = resp.data;
        console.log(this.tableData)
      })

    },
    onSubmit() {
      console.log('submit!');
      this.$message({
        showClose: true,
        message: '配置保存成功',
        type: 'success',
        duration: '1500',
        center: true
      });
      this.drawer = !this.drawer;
    },
    onCancel() {
      this.$message({
        showClose: true,
        message: '已取消',
        type: 'warning',
        duration: '1500'
      });
      this.drawer = !this.drawer;
    },
    send() {
      console.log(JSON.stringify(this.form.request));
      this.postRequest("/finixx/send", {api:this.api,"data":this.form.request,"env":"prod"}).then(resp => {
        this.result_textarea=JSON.stringify(resp.data);
        // console.log(this.tableData)
      })
    },
    cancelDialog() {
      this.visible = !this.visible;
    },
    clickTabs(tab, event) {
      console.log(tab, event);
    },
    handleRowClick(row) {
      let requestData = JSON.parse(row["requestData"])
      this.form.request = requestData
    },

    // formatter(row, column) {
    //     return row.address;
    // },
    // handleMoreClick(){
    //
    // },
    clickDropDownItem(command) {
      if (command == 1) {
        this.$message({
          showClose: true,
          message: '收藏成功,请在收藏中查看',
          type: 'success',
          duration: '1500',
          center: true
        });
      } else if (command == 3) {
        alert("删除");
      } else {
        alert(command)
      }
    }
  },
  watch: {
    //监控弹窗的变化
    visible(newVal, oldVal) {
      if (newVal == false) {
        this.form.request = {}
        this.result_textarea= ''
      }
    }
  }

}
</script>

<style scoped>
html, body {
  height: 100%;
}

/*必须要加*/
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%; /*必须要加*/
}

.main {
  float: left;
  width: 95%;
  background-color: #eff2f7;
  height: 100%; /*必须要加*/
}
</style>